
<template>
  <el-form :model="form" label-width="auto" style="max-width: 600px">
    <el-form-item label="小说名称">
      <el-input v-model="form.title" />
    </el-form-item>
    <el-form-item label="小说类别">
      <el-select v-model="form.novelKindId" placeholder="请选择一个类别">
        <el-option
          v-for="item in novelKindList"
          :label="item.kindName"
          :value="item.id"
          :key="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="作者">
      <el-input v-model="form.author" />
    </el-form-item>
    <el-form-item label="封面">
      <el-upload
        class="avatar-uploader"
        action="http://localhost:8880/admin/novel/uploadCoverImage"
        :headers="headers"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="form.coverImage" :src="form.coverImage" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </el-form-item>
    <el-form-item label="更新状态">
      <el-radio-group v-model="form.isEnd">
        <el-radio :value="0">连载中</el-radio>
        <el-radio :value="1">已完结</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="小说简介">
      <el-input v-model="form.description" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">添加</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { addNovel, getNovelKindList } from "@/api/novel";
import { getInfo } from "@/utils/storage";
import { ElMessage } from "element-plus";
import { reactive, onMounted } from "vue";

const form = reactive({
  title: "",
  novelKindId: "",
  coverImage: "",
  isEnd: "",
  description: "",
  author: "",
});

const novelKindList = reactive([
  { kindName: "玄幻", id: 1 },
  { kindName: "奇幻", id: 2 },
  { kindName: "武侠", id: 3 },
]);

const headers = {
  "Access-Token": getInfo().token,
};

const onSubmit = async () => {
  const res = await addNovel(form);
  if (res.data.success) {
    ElMessage.success("添加成功");
  }
};

const handleAvatarSuccess = (response) => {
  if (response.success) {
    form.coverImage = response.result;
  }
};
const beforeAvatarUpload = (rawFile) => {
  console.log("beforeAvatarUpload");
  if (rawFile.type !== "image/jpeg") {
    ElMessage.error("图片格式错误");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 10) {
    ElMessage.error("封面必须小于10M");
    return false;
  }
  return true;
};

const fetchNovelKindList = async () => {
  const res = await getNovelKindList();
  if (res.data.success) {
    novelKindList.splice(0, novelKindList.length, ...res.data.result);
  }
};

// 在组件挂载时调用
onMounted(() => {
  fetchNovelKindList();
});
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>